<template>
	<ul class="shzy-steps">
		<li v-for="(item,index) of list" :key="index">
			<view class="line" v-if="index != list.length-1"></view>
			<view class="circle"></view>
			<view class="content">
				 <view v-if="useSlot">
					   <slot :data="item"></slot>
				 </view>
				 <view v-else>
					{{item[titleName]}}
				 </view>
			</view>
		</li>
	</ul>
</template>

<script>
	export default {
		props:{
			useSlot: {  //是否使用插槽
				type: Boolean,
				default: false
			},
			titleName: { //  字段名称
				type:String,
				default:'title'
			},
			list: {  
				type:Array,
				default: []
			},
			direction: { // 步骤条方向 row  横向  column纵向
				type:String,
				default: 'column'
			}
		},
		data(){
			return {
				
			}
		},
		created(){
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.shzy-steps{
		list-style: none;
		margin:0px;
		padding:10px;
		li{
			padding-bottom: 20px;
			position: relative;
		}
		.line{
			position: absolute;
			left: 4px;
			height: 100%;
			border-left: 2px solid #E4E7ED;
		}
		.circle{
			position: absolute;
			background-color: #E4E7ED;
			border-radius: 50%;
			 left: -1px;
			 width: 12px;
			 height: 12px;
		}
		.content{
			position: relative;
			padding-left: 28px;
			top: -3px;
		}
	}
</style>